import * as echarts from '../../../components/ec-canvas/echarts'
import {
  ajaxGetSessionPrintOutVo,
  ajaxGetSessionResultOutVo,
} from '../../../api/my'
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //自定义导航高度
    customNavHeight: app.globalData.customNavInfo.navHeight,
    baseURL: app.globalData.config.baseURL,
    ec: {
      lazyLoad: true,
    },
    // 用户信息
    user:{},
    // 比赛信息
    info:{},
    options:{},

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // k1UserId=102134226386&id=539
    this.getSession(options).then(result=>{
      // 最快圈速
      result[0].data.baseTime = Math.min(...(result[0].data.k1ScoreInfoOutVo||[]).map(item=>item.userTime))
      result[0].data.userTimeList =  (result[0].data.userTimeList||[]).map(item=>{
        item.userTime = item.userTime.toFixed(3)
        return item
      })
      this.setData({
        user: result[0].data,
        info: result[1].data,
        options,
      })

      // 初始化 echarts
      this.echartsInit(
        this.getLegendData(),
        this.getXAxisData(result[1].data),
        this.getSeries(result[0].data, result[1].data),
      )
    })
  },
  // 图表图例
  getLegendData(){
    return ['本人成绩', '平均成绩', '本场每圈最快']
  },
  // 图表X轴数据
  getXAxisData(session){
    return new Array(session.raceCircleNum).fill(1).map((item,index)=>index+1)
  },
  // 图表线的数据
  getSeries(user, session){
    // 本人成绩
    const self = {
      name: '本人成绩',
      type: 'line',
      symbol: 'none',
      color: '#DC3021',
      data: (user.k1ScoreInfoOutVo||[]).map(item=>item.userTime)
    }

    // 平均成绩
    const average = {
      name: '平均成绩',
      type: 'line',
      symbol: 'none',
      color:'#6EEF48',
      data: this.getAverageCircle(),
    }
    // 本场每圈最快
    const fastest = {
      name: '本场每圈最快',
      type: 'line',
      symbol: 'none',
      color:'#0101E1',
      data: this.getFastestCircle(),
    }
    return [ self, average, fastest ]
  },

  
  // 获取每圈的平均用时
  getAverageCircle(){
    const circle = this.getCircle()
    return circle.map(item=>item.reduce((a, b) => a + b) / item.length)
  },
  // 获取本场每圈最快用时
  getFastestCircle(){
    const circle = this.getCircle()
    return circle.map(item=>Math.min(...item))
  },

  // 工具函数 - 获取每圈的数据
  getCircle(){
    // 填充数据
    const ranking = (this.data.info.userRaceNumRanking||[]).map(item=>{
      const l = item.length
      item.length = this.data.info.raceCircleNum
      item.fill({
        userTime: 0,
      }, l, this.data.info.raceCircleNum)
      return item
    })
    const circle = new Array(this.data.info.raceCircleNum).fill(null)
    const circleMap = circle.map((item, index)=>ranking.map(ch=>ch[index].userTime))
    // 去0
    return circleMap.map(item=>item.filter(ch=>ch))
  },

  // 图例:legendData  x轴数值:xAxisData  图表线的数据:series  
  echartsInit(legendData, xAxisData, series, ){

    const lazyComponent = this.selectComponent('#echart-line')
    lazyComponent.init((canvas, width, height, dpr) =>{
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(chart)
      let option = {
        grid:{
          top:'36rpx',
          left:'10rpx',
          right:'10rpx',
          bottom:'10rpx',
          containLabel: true,
        },
        // 图例组件
        legend: {
          show: true,
          data: legendData,
          top: 0,
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}.0'
          }
        },
        series: series,
      };
      chart.setOption(option);
      return chart;
    })
  },
  // 获取比赛的信息
  getSession(options){
    return Promise.all([
      // 个人比赛信息
      ajaxGetSessionPrintOutVo({
        sessionId: options.id,
        k1UserId: options.k1UserId,
        // k1UserId: 200065,
      }),
      // 完整比赛信息
      ajaxGetSessionResultOutVo({
        sessionId: options.id,
        // sessionId: 539, // 测试数据
      })
    ])
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
})